Feature/success stories section#723
Conversation
There was a problem hiding this comment.
Pull request overview
Implements issue #530 by adding a “Success Stories” section to the homepage and introducing related UI/animation updates (hero + layout), plus a small backend dependency update.
Changes:
- Adds a Success Stories section/cards and links to the dedicated Success Stories page.
- Refactors homepage hero visuals/animations and updates home page styling (including responsive tweaks).
- Adds
axiosto backend dependencies (with lockfile updates).
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| public/index.html | Adds a public-facing homepage variant including the Success Stories section and updated hero UI. |
| index.html | Updates the main homepage hero layout, adds Success Stories section/linkage, and adjusts page structure. |
| frontend/pages/Event/linux.html | Refines animations (IntersectionObserver class-based reveal) and hero parallax behavior. |
| frontend/gitignore | Normalizes ignore entry formatting. |
| frontend/css/home.css | Updates hero orb/floating chips, Success Stories styling, and responsive/dark-mode related rules. |
| backend/package.json | Adds axios dependency. |
| backend/package-lock.json | Locks axios and transitive dependencies. |
Files not reviewed (1)
- backend/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <svg class="hero-route" viewBox="0 0 520 320" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path class="hero-route-path" d="M30 250 C130 140, 190 290, 280 190 C350 110, 420 160, 490 70" /> | ||
| <circle class="hero-route-dot" cx="30" cy="250" r="6" /> | ||
| <circle class="hero-route-dot" cx="280" cy="190" r="6" /> | ||
| <circle class="hero-route-dot" cx="490" cy="70" r="6" /> | ||
| </svg> |
There was a problem hiding this comment.
There is an extra .hero-route SVG rendered outside the .hero section, even though one already exists inside the hero visual. Because .hero-route is absolutely positioned, this duplicate can overlay later content unpredictably. Remove the duplicate SVG or ensure there is only one route element.
| <svg class="hero-route" viewBox="0 0 520 320" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path class="hero-route-path" d="M30 250 C130 140, 190 290, 280 190 C350 110, 420 160, 490 70" /> | |
| <circle class="hero-route-dot" cx="30" cy="250" r="6" /> | |
| <circle class="hero-route-dot" cx="280" cy="190" r="6" /> | |
| <circle class="hero-route-dot" cx="490" cy="70" r="6" /> | |
| </svg> |
| <section id="opensource-video" style="padding: 60px 20px; text-align: center;"> | ||
|
|
||
| <b>🎥Video for Beginners 🌟 "Start" your First Contribution</b> | ||
|
|
||
|
|
||
| <div style=" | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
| </section> | ||
| <section id="opensource-video" style="padding: 60px 20px; text-align: center;"> | ||
| <span class="programs-eyebrow" style="display: block; margin-bottom: 10px; color: #ffca28; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;"> | ||
| Start Your Journey | ||
| </span> | ||
| <h3>🎥 Video for Beginners</h3> | ||
| <p style="margin-bottom: 30px;">Learn the workflow: Fork, Clone, Commit, and Push.</p> | ||
|
|
||
| <div class="video-thumbnail-container" style=" | ||
| <section id=" opensource-video" style="padding: 60px 20px; text-align: center;"> | ||
| <span class="programs-eyebrow" | ||
| style="display: block; margin-bottom: 10px; color: #ffca28; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;"> | ||
| Start Your Journey |
There was a problem hiding this comment.
The video section markup is currently broken: there is an incomplete <div style=" (unterminated attribute) and then a second duplicated video <section> whose id contains a leading space (id=" opensource-video"). This will corrupt the DOM parsing for everything after it. Remove the leftover/partial block and keep a single well-formed video section with a valid id value.
| </div> | ||
|
|
||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Unbalanced closing tags in the Why section: .why-container is closed twice (</div> on both lines 643 and 644). This can break layout for all subsequent sections. Remove the extra closing </div> so tag nesting matches the opened containers.
| </div> |
| .hero-float-2 { | ||
| left: 0; | ||
| bottom: 90px; | ||
| animation: heroFloat 8.5s ease-in-out infinite; | ||
| left: 80%; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| animation-delay: 1.5s; | ||
| } | ||
|
|
||
| /* 3. Bottom Right (Real programs) */ | ||
| .hero-float-3 { | ||
| right: 0; | ||
| bottom: 35px; | ||
| animation: heroFloat 7.6s ease-in-out infinite; | ||
| left: 65%; | ||
| bottom: 15%; | ||
| animation-delay: 1s; | ||
| } | ||
|
|
||
| /* 4. Bottom Left (Good first issues) */ | ||
| .hero-float-4 { | ||
| right: 65%; | ||
| bottom: 15%; | ||
| animation-delay: 2s; | ||
| } | ||
|
|
||
| /* 5. Middle Left (Community-first) */ | ||
| .hero-float-5 { | ||
| right: 80%; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| animation-delay: 0.5s; |
There was a problem hiding this comment.
.hero-float-2 and .hero-float-5 use transform: translateY(-50%) for centering, but .hero-float also animates transform via chipFloat, which overrides the centering transform (so these chips won't stay vertically centered). Use a wrapper element for animation, or combine transforms in the keyframes (e.g., include the -50% translate in the animated transform).
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> | ||
| <link rel="icon" href="../frontend/library/assets/favicon.png" type="image/png" /> | ||
| <link rel="stylesheet" href="../frontend/css/style.css" /> | ||
| <link rel="stylesheet" href="../frontend/css/home.css" /> | ||
| </head> | ||
|
|
||
|
|
||
| <style> | ||
| #scrollTopBtn { |
There was a problem hiding this comment.
<head> is closed on line 20, but the inline <style> block and the recommendations.css <link> come after it, followed by a second </head> later. This produces invalid HTML and can cause the browser to drop or reorder metadata/styles. Keep a single <head> element and move the <style> + extra stylesheet link inside it (remove the duplicate closing </head>).
| /* ========================= | ||
| DARK MODE | ||
| body.dark-mode { | ||
| --warm-cream: #0d1117; | ||
| --light-parchment: #161b22; | ||
| --charcoal-dark: #f0f6fc; | ||
| --text-secondary: #8b949e; | ||
| --deep-navy: #ecf0f1; | ||
| background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); | ||
| color: var(--charcoal-dark); | ||
| } |
There was a problem hiding this comment.
CSS comment is not terminated: the block starting at /* ... DARK MODE never closes before body.dark-mode {, which comments out a large portion of the stylesheet until the next */. Add the missing */ for the section header so the body.dark-mode rules (and following blocks) are actually applied.
| /* Floating Chips Container */ | ||
| .hero-floats { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| pointer-events: none; | ||
| /* Let clicks pass through */ | ||
| } | ||
|
|
||
| /* Base Float Style */ | ||
| .hero-float { | ||
| position: absolute; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 12px; | ||
| padding: 10px 20px; | ||
| border-radius: 50px; | ||
| background: #ffffff; | ||
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); | ||
| /* Softer shadow */ | ||
| border: 1px solid rgba(212, 175, 55, 0.15); | ||
| font-family: "Inter", sans-serif; | ||
| font-weight: 600; | ||
| font-size: 0.95rem; | ||
| color: #1e293b; | ||
| white-space: nowrap; | ||
| /* Removed heroFloat from here as it conflicts with absolute positioning if not careful, or use a specific one */ | ||
| /* For floating chips, we can use a simpler float animation or keyframe that doesn't use translate(-50%, -50%) */ | ||
| animation: chipFloat 6s ease-in-out infinite; | ||
| z-index: 10; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| @keyframes chipFloat { | ||
|
|
||
| 0%, | ||
| 100% { | ||
| transform: translateY(0); | ||
| } | ||
|
|
||
| to { | ||
| stroke-dashoffset: -180; | ||
| 50% { | ||
| transform: translateY(-8px); | ||
| } | ||
| } | ||
|
|
||
| .hero-floats { | ||
| position: absolute; | ||
| inset: 0; | ||
| .hero-float:hover { | ||
| transform: scale(1.05); | ||
| box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2) !important; | ||
| border-color: var(--primary-gold); | ||
| } |
There was a problem hiding this comment.
.hero-floats sets pointer-events: none, but there are hover styles on .hero-float:hover. With pointer events disabled, the hover styles cannot trigger. Either remove the hover styles or re-enable pointer events on the floats (e.g., keep the container transparent but set pointer-events: auto on .hero-float).
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> | ||
| <link rel="icon" href="./frontend/library/assets/favicon.png" type="image/png" /> | ||
| <link rel="stylesheet" href="frontend/css/style.css" /> | ||
| <link rel="stylesheet" href="frontend/css/home.css" /> | ||
| </head> | ||
|
|
||
|
|
||
| <style> | ||
| #scrollTopBtn { | ||
| display: flex !important; | ||
| /* Enables Flexbox centering */ | ||
| justify-content: center !important; | ||
| /* Horizontally center */ | ||
| align-items: center !important; | ||
| /* Vertically center */ | ||
| padding: 0 !important; | ||
| /* Remove padding that offsets the icon */ | ||
| line-height: 0 !important; | ||
| /* Reset line height for precise icons */ | ||
| } | ||
| /* Container to center the entire grid */ | ||
| .card-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
| gap: 40px; | ||
| justify-content: center; /* Centers the grid itself */ | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| } | ||
| /* Container Layout */ | ||
| .card-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
| gap: 40px; | ||
| max-width: 1200px; | ||
| margin: 60px auto; | ||
| padding: 0 20px; | ||
| justify-content: center; /* Centers the grid on the page */ | ||
| } | ||
|
|
||
| /* Card Core Design */ | ||
| .card { | ||
| background: #ffffff; | ||
| border: 1px solid #e2d1a8; | ||
| border-radius: 20px; | ||
| padding: 50px 30px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; /* Centers internal items horizontally */ | ||
| text-align: center; /* Centers the text lines */ | ||
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | ||
| height: 100%; | ||
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| /* Golden Glow Hover Effect */ | ||
| .card:hover { | ||
| transform: translateY(-10px); | ||
| border-color: #b59d5c; | ||
| box-shadow: 0 20px 40px rgba(181, 157, 92, 0.2) !important; | ||
| } | ||
|
|
||
| /* Icon Centering */ | ||
| .card-icon { | ||
| font-size: 3rem; | ||
| color: #b59d5c; | ||
| margin-bottom: 25px; | ||
| height: 70px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| /* Typography */ | ||
| .card h4 { | ||
| font-family: 'Playfair Display', serif; | ||
| font-size: 1.5rem; | ||
| color: #1a1a1a; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .card p { | ||
| font-family: 'Inter', sans-serif; | ||
| font-size: 0.95rem; | ||
| color: #555; | ||
| line-height: 1.7; | ||
| margin-bottom: 30px; | ||
| flex-grow: 1; /* Pushes the badge to the bottom for row alignment */ | ||
| } | ||
|
|
||
| /* Badge Styling */ | ||
| .badge { | ||
| background: #b59d5c; | ||
| color: #fff; | ||
| padding: 10px 30px; | ||
| border-radius: 30px; | ||
| font-weight: 600; | ||
| font-size: 0.85rem; | ||
| box-shadow: 0 4px 10px rgba(181, 157, 92, 0.3); | ||
| text-transform: uppercase; | ||
| letter-spacing: 1px; | ||
| } | ||
| /* Individual Card Centering */ | ||
| .program-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; /* Centers internal elements horizontally */ | ||
| text-align: center; /* Centers text within elements */ | ||
| height: 100%; | ||
| padding: 40px 30px; | ||
| background: var(--card-bg); | ||
| border: 1px solid var(--border-color); | ||
| border-radius: 20px; | ||
| transition: var(--card-transition); | ||
| } | ||
|
|
||
| /* Icon Area Centering */ | ||
| .program-icon { | ||
| font-size: 2.5rem; | ||
| margin-bottom: 20px; | ||
| height: 60px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color: var(--primary-gold); | ||
| } | ||
|
|
||
| /* Pushing Button to Bottom for Alignment */ | ||
| .program-card .card-btn { | ||
| margin-top: auto; /* Aligns buttons across a row */ | ||
| } | ||
|
|
||
| /* --- FEATURE: Golden Glow Hover Effect for Legendary Cards --- */ | ||
| #programs .card { | ||
| transition: all 0.3s ease-in-out; | ||
| } | ||
|
|
||
| #programs .card:hover { | ||
| /* Golden/Yellow Glow */ | ||
| box-shadow: 0 0 25px rgba(255, 215, 0, 0.6) !important; | ||
| /* Lift effect */ | ||
| transform: translateY(-5px); | ||
| /* Gold border */ | ||
| border-color: rgba(255, 215, 0, 0.8) !important; | ||
| } | ||
|
|
||
| /* --- NEW: Golden Glow Hover Effect for Milestone Stats Cards --- */ | ||
| .stats .stat-card { | ||
| transition: all 0.3s ease-in-out; | ||
| border-radius: 12px; /* Ensures glow follows rounded corners if present */ | ||
| } | ||
|
|
||
| .stats .stat-card:hover { | ||
| /* Stronger Golden Glow from the back */ | ||
| box-shadow: 0 0 40px rgba(255, 215, 0, 0.5) !important; | ||
| transform: translateY(-5px); | ||
| z-index: 2; /* Ensures it pops out above neighbors */ | ||
| } | ||
|
|
||
| /* --- FIX: Timeline Z-Index Layering --- */ | ||
| /* This ensures the golden icons sit ON TOP of the connecting vertical line */ | ||
| .compass-step .compass-icon { | ||
| position: relative; | ||
| z-index: 10; | ||
| } | ||
|
|
||
| /* Ensure the timeline line stays in the back */ | ||
| .compass-timeline { | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| /* Base hidden state */ | ||
| .why-journey { | ||
| position: relative; | ||
| max-width: 1100px; | ||
| margin: 0 auto; | ||
| padding: 60px 40px; | ||
| } | ||
|
|
||
| /* Horizontal timeline line */ | ||
| .journey-line { | ||
| position: absolute; | ||
| top: 40%; | ||
| left: 8%; | ||
| width: 84%; | ||
| height: 3px; | ||
| background: linear-gradient(to right, #d4af37, #f5d76e); | ||
| transform: scaleX(0); | ||
| transform-origin: left; | ||
| transition: transform 1.2s ease; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| /* Steps initially hidden */ | ||
| .journey-steps { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| position: relative; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .journey-step { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| min-width: 120px; | ||
| opacity: 0; | ||
| transform: translateY(30px); | ||
| transition: all 0.6s ease; | ||
| } | ||
|
|
||
| .journey-icon { | ||
| width: 64px; | ||
| height: 64px; | ||
| border-radius: 50%; | ||
| background: #d4af37; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color: white; | ||
| font-size: 1.5rem; | ||
| margin-bottom: 12px; | ||
|
|
||
| /* THIS ensures perfect centering */ | ||
| position: relative; | ||
| z-index: 3; | ||
| } | ||
|
|
||
| /* Activated state */ | ||
| .why-journey.is-visible .journey-line { | ||
| transform: scaleX(1); | ||
| } | ||
|
|
||
| .why-journey.is-visible .journey-step { | ||
| opacity: 1; | ||
| transform: translateY(0) scale(1); | ||
| } | ||
|
|
||
| .why-journey.is-visible .journey-icon { | ||
| box-shadow: 0 0 18px rgba(212, 175, 55, 0.6); | ||
| transition: box-shadow 0.6s ease; | ||
| } | ||
| /* Sequential reveal */ | ||
| .journey-step:nth-child(1) { | ||
| transition-delay: 0.3s; | ||
| } | ||
| .journey-step:nth-child(2) { | ||
| transition-delay: 0.6s; | ||
| } | ||
| .journey-step:nth-child(3) { | ||
| transition-delay: 0.9s; | ||
| } | ||
|
|
||
| </style> | ||
| <link rel="stylesheet" href="frontend/css/recommendations.css" /> | ||
| <style> | ||
| #scrollTopBtn { |
There was a problem hiding this comment.
</head> appears at line 20, but the inline <style> block and recommendations.css <link> come after it, followed by another </head> later (around line 291). This results in invalid HTML and unpredictable handling of metadata/styles. Keep only one <head> element and move the <style> + extra <link> inside it (remove the duplicate closing </head>).
|
@Abhilash-18-tech why there are two prs? |
|
@sayeeg-11 I deleted the 2nd PR and also resolved conflicts . |
@Abhilash-18-tech please resolve merge conflicts |
2 participants
📋 Description
This PR implements issue #530 by adding a Success Stories section where contributors can share their learning journeys and experiences in open source.
Key Features Added:
Technical Changes:
success-stories.htmlpagesuccess-stories.jsfor functionalitysuccess-stories-page.cssfor styling📸 Screenshots (MANDATORY for UI/UX changes)
🔗 Related Issue
Fixes #530
✅ Type of Change
✅ Checklist
📝 Additional Notes
This enhancement creates an inspiring section for contributors to share their open source journeys, helping motivate new contributors and build community engagement. Perfect for the SWoC26 event!